<template>
  <div class="container">
    <div class="table-content">
      <a-table
        class="table"
        :columns="columns"
        :data-source="store.deliveryList"
        :loading="store.loading"
        :scroll="{ x: 1500, y: 800 }"
        :pagination="false"
      >
        <template #bodyCell="{ column, record }">
          <div v-if="column.key === 'operation'">
            <a-button
              type="link"
              size="small"
              @click="handleAccept(record)"
              v-if="
                record.status === '待测评' ||
                record.status === '待笔试' ||
                record.status === '待面试'
              "
              >接受{{ record.status.slice(1) }}</a-button
            >
            <a-button
              type="link"
              size="small"
              @click="handleReject(record)"
              v-if="
                record.status === '待测评' ||
                record.status === '待笔试' ||
                record.status === '待面试'
              "
              >拒绝{{ record.status.slice(1) }}</a-button
            >
            <a-button type="link" size="small" @click="handleOpen(record)">查看详情</a-button>
          </div>
        </template>
      </a-table>
    </div>
  </div>
  <a-drawer width="400px" title="投递流程" placement="right" v-model:open="open" :closable="false">
    <template #extra>
      <a-icon type="icon-CloseButton" style="cursor: pointer" @click="handleClose()"></a-icon>
    </template>
    <a-timeline>
      <a-timeline-item :color="deliveryColor">投递简历</a-timeline-item>
      <a-timeline-item v-if="!rejectFlag" :color="testColor"> 测评 </a-timeline-item>
      <a-timeline-item v-if="!rejectFlag" :color="examColor">笔试 </a-timeline-item>
      <a-timeline-item v-if="!rejectFlag" :color="interviewColor"> 面试 </a-timeline-item>
      <a-timeline-item v-if="!rejectFlag" :color="acceptColor"> 接受offer </a-timeline-item>
      <a-timeline-item v-if="rejectFlag" :color="rejectColor"> 拒绝</a-timeline-item>
    </a-timeline>
  </a-drawer>
</template>

<script setup>
import { ref, watch, onMounted, computed } from 'vue'
import { useDeliveryStore } from '@/stores/deliveryStore'
import { useUserStore } from '@/stores/userStore'
import { message } from 'ant-design-vue'
import server from '@/api/index'
import dayjs from 'dayjs'

const store = useDeliveryStore()
const userStore = useUserStore()

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    width: 100,
    fixed: 'left',
  },
  {
    title: '用户ID',
    dataIndex: 'userId',
    key: 'userId',
    width: 100,
    fixed: 'left',
  },
  {
    title: '公司 ID',
    dataIndex: 'companyId',
    key: 'companyId',
    width: 100,
  },
  {
    title: '公司名称',
    dataIndex: 'companyName',
    key: 'companyName',
    width: 150,
  },
  {
    title: '职位ID',
    dataIndex: 'positionId',
    key: 'positionId',
    width: 200,
  },

  {
    title: '描述',
    dataIndex: 'description',
    key: 'description',
    width: 200,
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 80,
  },
  {
    title: '测评日期',
    dataIndex: 'testDate',
    key: 'testDate',
    width: 120,
  },
  {
    title: '笔试日期',
    dataIndex: 'examDate',
    key: 'examDate',
    width: 120,
  },
  {
    title: '面试日期',
    dataIndex: 'interviewDate',
    key: 'interviewDate',
    width: 120,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: 200,
    fixed: 'right',
  },
]

const deliveryColor = ref('gray')
const testColor = ref('gray')
const examColor = ref('gray')
const interviewColor = ref('gray')
const acceptColor = ref('gray')
const rejectColor = ref('gray')
const rejectFlag = ref(false)
const getDeliveryList = async () => {
  try {
    const res = await server.listInterviewsByUserId(userStore.userAccount)
    if (res?.data.code === 0) {
      store.deliveryList = res.data.data
      store.deliveryList.map(item => {
        item.testDate = dayjs(item.testDate).format('YYYY-MM-DD HH:mm:ss')
        item.examDate = dayjs(item.examDate).format('YYYY-MM-DD HH:mm:ss')
        item.interviewDate = dayjs(item.interviewDate).format('YYYY-MM-DD HH:mm:ss')
        switch (item?.status) {
          case 1:
            item.status = '已发起'
            break
          case 2:
            item.status = '待测评'
            break
          case 3:
            item.status = '测评完成'
            break
          case 4:
            item.status = '待笔试'
            break
          case 5:
            item.status = '笔试完成'
            break
          case 6:
            item.status = '待面试'
            break
          case 7:
            item.status = '面试完成'
            break
          case 8:
            item.status = '已拒绝'
            break
        }
      })
    } else {
      message.error(res.data.message)
    }
  } catch (e) {
    message.error(e)
  } finally {
  }
}

const handleAccept = async record => {
  try {
    if (record.status === '待测评') {
      const res = await server.updateInterviewStatus({
        status: 3,
        id: record.id,
      })
      if (res.data.code === 0) {
        message.success('接受成功')
        getDeliveryList()
      } else {
        message.error('结束失败')
      }
    }
    if (record.status === '待笔试') {
      const res = await server.updateInterviewStatus({
        status: 5,
        id: record.id,
      })
      if (res.data.code === 0) {
        message.success('接受成功')
        getDeliveryList()
      } else {
        message.error('结束失败')
      }
    }
    if (record.status === '待面试') {
      const res = await server.updateInterviewStatus({
        status: 7,
        id: record.id,
      })
      if (res.data.code === 0) {
        message.success('接受成功')
        getDeliveryList()
      } else {
        message.error('接受失败')
      }
    }
  } catch (error) {
    console.log(error)
    message.error(error)
  }
}
const handleReject = async record => {
  try {
    const res = await server.updateInterviewStatus({
      status: 8,
      id: record.id,
    })
    if (res.data.code === 0) {
      message.success('拒绝成功')
      getDeliveryList()
    } else {
      message.error('拒绝失败')
    }
  } catch (error) {
    message.error(error)
  }
}
const open = ref(false)
const handleOpen = async record => {
  open.value = true
  if (record.status === '已发起') {
    deliveryColor.value = 'green'
  } else if (record.status === '待测评') {
    deliveryColor.value = 'green'
    testColor.value = 'blue'
  } else if (record.status === '待笔试' || record.status === '测评完成') {
    deliveryColor.value = 'green'
    testColor.value = 'green'
    examColor.value = 'blue'
  } else if (record.status === '待面试' || record.status === '笔试完成') {
    deliveryColor.value = 'green'
    testColor.value = 'green'
    examColor.value = 'green'
    interviewColor.value = 'blue'
  } else if (record.status === '面试完成') {
    deliveryColor.value = 'green'
    testColor.value = 'green'
    examColor.value = 'green'
    interviewColor.value = 'green'
    acceptColor.value = 'blue'
  } else if (record.status === '已拒绝') {
    rejectFlag.value = true
    deliveryColor.value = 'green'
    rejectColor.value = 'red'
  }
}

const handleClose = () => {
  open.value = false
}
onMounted(() => {
  getDeliveryList()
})
</script>

<style lang="scss" scoped>
.container {
  // display: flex;
  width: 100%;
  height: 100%;
  background-color: #fff;

  .form-content {
    display: flex;
    justify-content: space-between;
    padding: 20px 20px 0;

    .search-botton {
      margin-right: 10px;
    }
  }

  .table-content {
    padding: 15px;
  }

  .page-content {
    display: flex;
    justify-content: flex-end;
    padding-right: 15px;
  }
}
</style>
